<template>
    <h-collapse>
        <template #title>
            <flexbox class="title">
                <span class="title">版本能效</span>
                <img class="margin-l-8" src="@/assets/images/chart/tooltip.png" @click.stop="handleShowTipModal" />
            </flexbox>
        </template>
        <div class="card">
            <div class="card-cont">
                <flexbox class="top">
                    <div class="item hover-shadow" v-for="(item, index) of cardList" :key="index">
                        <div>
                            <div style="color: #17233d; font-size: 20px; font-weight: bold">{{ item.value }}</div>
                            <div style="margin-top: 8px; color: #8590a5; font-size: 12px">{{ item.title }}</div>
                        </div>
                        <div class="main-img">
                            <img :src="item.imgSrc" />
                        </div>

                        <!-- <div class="trangle" v-if="item.isWarning" /> -->
                        <!-- <a-tooltip v-if="item.isWarning">
                            <template #title>
                                <span>该数据远小于参考值，可能存在下列录入不规范情形 需求提出日期不准确 </span>
                                <router-link :to="{ path: '/energyManage/requireTrack', query: { systemId: detail.systemId } }">查看详情</router-link>
                            </template>
                            <img src="@/assets/images/chart/warning.png" class="warning-img" v-if="item.isWarning" />
                        </a-tooltip> -->
                    </div>
                </flexbox>
                <div>
                    <energy-table :detail="detail" />
                </div>
            </div>
        </div>
    </h-collapse>
</template>

<script lang="ts">
import HCollapse from './HCollapse.vue';
import EnergyTable from './EnergyTable.vue';
import { HLineChart } from '@/components';
import { defineComponent, ref, unref, reactive, toRefs, watch } from 'vue';
export default defineComponent({
    name: 'insideChartsPmpChart',
    props: {
        detail: {
            type: Object,
            default: () => ({})
        },
        riskData: {
            type: Object,
            default: () => ({})
        }
    },
    components: {
        HLineChart,
        EnergyTable,
        HCollapse
    },
    emits: ['handleShowTipModal'],
    setup(props, { emit }) {
        const state = reactive<any>({
            cardList: [
                { imgSrc: require('@/assets/images/chart/5.png'), title: 'sp总数', key: 'storyPointSum', value: '', isWarning: false },
                { imgSrc: require('@/assets/images/chart/6.png'), title: '总产能(h)', key: 'productionCapacitySum', value: '', isWarning: false },
                { imgSrc: require('@/assets/images/chart/7.png'), title: '实际总耗时(h)', key: 'effectiveProductionTimeSum', value: '', isWarning: false },
                { imgSrc: require('@/assets/images/chart/8.png'), title: '预估总耗时(h)', key: 'planWorkHoursSum', value: '', isWarning: false },
                { imgSrc: require('@/assets/images/chart/9.png'), title: '平均利用率', key: 'usePercentAvg', value: '', isWarning: false }
            ]
        });
        const handleShowTipModal = () => {
            emit('handleShowTipModal', 2);
        };
        const initData = () => {
            state.cardList.forEach((item, i) => {
                if (item.key === 'storyPointSum') {
                    state.cardList[i].value = props.detail[item.key] ? props.detail[item.key] : 0;
                    state.cardList[i].isWarning = state.cardList[i].value < props.riskData.storyPointSumOffset;
                } else if (item.key === 'productionCapacitySum') {
                    state.cardList[i].value = props.detail[item.key] ? props.detail[item.key] : 0;
                    state.cardList[i].isWarning = state.cardList[i].value < props.riskData.randdSumOffset;
                } else if (item.key === 'effectiveProductionTimeSum') {
                    state.cardList[i].value = props.detail[item.key] ? props.detail[item.key] : 0;
                    state.cardList[i].isWarning = state.cardList[i].value < props.riskData.expendSumOffset;
                } else if (item.key === 'planWorkHoursSum') {
                    state.cardList[i].value = props.detail[item.key] ? props.detail[item.key] : 0;
                    state.cardList[i].isWarning = state.cardList[i].value < props.riskData.planSumOffset;
                } else if (item.key === 'usePercentAvg') {
                    state.cardList[i].value = props.detail[item.key] ? parseFloat((props.detail[item.key] * 100).toPrecision(12)) + '%' : 0;
                    state.cardList[i].isWarning = props.detail[item.key] ? props.detail[item.key] * 100 < props.riskData.randdAvgUseRatio * 100 : false;
                }
            });
        };
        watch(
            () => props.detail,
            () => {
                initData();
            },
            {
                deep: true
            }
        );
        initData();
        return {
            ...toRefs(state),
            handleShowTipModal
        };
    }
});
</script>

<style scoped lang="less">
.card {
    min-height: 372px;
    overflow: hidden;
    position: relative;
    background-color: #fff;
    border-radius: 4px;
    cursor: pointer;
    &-cont {
        height: 648px;
        padding: 24px;
        .top {
            margin-bottom: 6px;
            .item {
                width: 20%;
                background: #ffffff;
                border-radius: 2px;
                border: 1px solid #edeff3;
                padding: 15px 22px;
                display: flex;
                justify-content: space-between;
                position: relative;
                .main-img {
                    img {
                        position: absolute;
                        right: 12px;
                        width: 40px;
                        height: 40px;
                    }
                }
                .trangle {
                    position: absolute;
                    z-index: 1;
                    top: 0;
                    right: 0;
                    width: 0px;
                    height: 0px;
                    border-top: 30px solid #f7762a;
                    border-left: 35px solid transparent;
                }
                .warning-img {
                    width: 6px;
                    position: absolute;
                    top: 5px;
                    right: 5px;
                    z-index: 2;
                }
            }
            .item:not(:last-child) {
                margin-right: 12px;
            }
        }
    }
}
.card:first-child {
    margin-left: 0 !important;
    margin-top: 0 !important;
}
</style>